<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>锋利的jQuery</title>
	<style>
		#a123{
			width:600px;
			height:450px;
			margin:50px auto;
			padding-left:30px;
			position:absolute;
			left:48%;
			top:10%;
			border:0px;
			margin:0px;
			padding:0px;
			display:inline-block;
			text-align:right;
	
		}
		.btn-box{
			overflow: hidden;

		}
		.btn-box a{
			float: left;
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-decoration: none;
			text-align: center;
			background: #eee;
			color:#333;
		}
		.cont-box .cont{
			width: 280px;
			height:200px;
			padding: 10px;
			border: 1px solid #ccc;
		}
		.span{
			display:inline-block;
			text-align:right;
		}
		
	</style>
</head>
<body>
	<div id="a123">
		<div class="btn-box">
			<a href="javascript:;" style="background:blue;color:#fff;">窗口1</a>
			<a  href="javascript:;">窗口2</a>
			<a  href="javascript:;">窗口3</a>
		</div>
		<div class="cont-box">
			<div class="cont" ><span>广西水利电力职业技术学院系学生会</span></div>
			<div class="cont" style="display:none">广西水利电力职业技术学院社团总会</div>
			<div class="cont" style="display:none">广西水利电力职业技术学院敏捷社会</div>
		</div>
	</div>
	<div id="a12">
		<div class="btn-box">
			<a href="javascript:;" style="background:blue;color:#fff;">窗口1</a>
			<a  href="javascript:;">窗口2</a>
			<a  href="javascript:;">窗口3</a>
		</div>
		<div class="cont-box">
			<div class="cont" ><span>广西水利电力职业技术学院系学生会</span></div>
			<div class="cont" style="display:none">广西水利电力职业技术学院社团总会</div>
			<div class="cont" style="display:none">广西水利电力职业技术学院敏捷社会</div>
		</div>
	</div>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script>
	<script>


	$(function(){
		a("#a12")
		a("#a123",{btnClass:'.btn'})

	})
			function a(b123){
		var tabBox=$(b123);//
		var btn=tabBox.find('a');//
		var cont=tabBox.find('.cont');//
		btn.click(function(){//
			var idx=$(this).index();//
			console.log(idx);//
			btn.css({"background":"#eee","color":"#333"});//
			$(this).css({"background":"blue","color":"#fff"})//
			cont.css({"display":"none"});//
			cont.eq(idx).css({"display":"block"});//
		})

		}
		




		



			//tabBox.css({"background":"#red";"color":"#fff"})
			//btn.css({"background":"#666";"color":"#fff"})
			//cont.css({"display":"none"})
			//cont.css({"display":"block"})
		//}
		//$(tabBox).ready(function(){
	  //$("#hide").click(function(){
	  //$("a").hide();
	  //});
	  //$("#show").click(function(){
	  //$("a").show();
	 

		// index()   eq()
		
		
	 	///div.css({display:"block"})
	 	/*a*/
	</script>
</body>
</html>